/**
*create by Jancheng ON 2019/1/14
*
**/
<template>
    <div>
        <h3>qd-pert(轻点双代号网络图)</h3>
        <div class="qd-pert-demo">
            <div class="qd-pert-use">
                <h3>使用说明</h3>
            </div>
            <div style="width: 1600px">
                <div><span @click="clickTestPath">关键路径</span>|====|<span @click="clickTest('1')">高亮显示1-1</span>|====|<span @click="clickTest('5')">高亮显示1-3-2</span></div>
                <div><span @click="clickUpdate">刷新画布</span></div>
                <div id="container" style="height: 500px"></div>
            </div>
        </div>
    </div>
</template>
<script>
    import qdPert from '../../packages/qd-pert/src/baseHandle/qdPertGraph'
    // import {qdPert} from  'qd-plugins'
    export default {
        data:function(){
            return {
                // taskTree:[],
                taskTree:[
                    {
                        id:'1',
                        name:'挖土',
                        start_date:1553135919000,//3.21
                        end_date:1554079658000,//4.1
                        duration:'1-100',
                        parent:'1',
                        type:'project',//project:项目 task:任务  milestone：里程碑
                    },
                    {
                        id:'2',
                        name:'混泥土',
                        start_date:1554079658000,//4.1
                        end_date:1554425258000,//4.5
                        duration:'200-500',
                        parent:'1',
                        type:'project'
                    },
                    {
                        id:'3',
                        name:'混泥土-排水',
                        start_date:1553215658000,//3.22
                        end_date:1554425258000,//4.5
                        duration:'230-300',
                        parent: "1",
                        type:'task'
                    },
                    {
                        id:'4',
                        name:'混泥土-土石方',
                        start_date:1554425258000,//4.5
                        end_date:1554684458000,//4.8
                        duration:'220-350',
                        parent: '1',
                        type:'task'
                    },
                    {
                        id:'5',
                        name:'混泥土-排线',
                        start_date:1554598058000,//4.7
                        end_date:1554684458000,//4.8
                        duration:'300-400',
                        parent: '1',
                        type:'task'
                    },
                    {
                        id:'6',
                        name:'混泥土-排线-1',
                        start_date:1553474858000,//3.21
                        end_date:1553481519000,//3.25
                        duration:'300-350',
                        parent: '1-2-3',
                        type:'task'
                    },
                    {
                        id:'7',
                        name:'混泥土-地基',
                        start_date:1553135919000,//3.25
                        end_date:1553481519000,//3.25
                        duration:'300-400',
                        parent: '1',
                        type:'task'
                    },
                    {
                        id:'8',
                        name:'混泥土-地基-1',
                        start_date:1553481519000,//3.25
                        end_date:1554079658000,//4.1
                        duration:'300-400',
                        parent: '1',
                        type:'task'
                    },
                    {
                        id:'9',
                        name:'混泥土-刷墙',
                        start_date:1553302058000,//3.21
                        end_date:1553481519000,//3.25
                        duration:'350-500',
                        parent: "1",
                        type:'task'
                    },
                    {
                        id:'10',
                        name:'验收',
                        start_date:1553302058000,//3.21
                        end_date:1553481519000,//3.25
                        duration:'1-700',
                        parent: "1",
                        type:'project'
                    },
                    {
                        id:'11',
                        name:'验收-基础',
                        start_date:1553302058000,//3.21
                        end_date:1553481519000,//3.25
                        duration:'1-400',
                        parent: "1",
                        type:'task'
                    },
                    {
                        id:'12',
                        name:'验收-屋面',
                        start_date:1553302058000,//3.21
                        end_date:1553481519000,//3.25
                        duration:'500-700',
                        parent: "1",
                        type:'task'
                    },
                    {
                        id:'13',
                        name:'施工',
                        start_date:1553302058000,//3.21
                        end_date:1553481519000,//3.25
                        duration:'700-1000',
                        parent:'1',
                        type:'project'
                    },
                    {
                        id:'14',
                        name:'施工-采购',
                        start_date:1553302058000,//3.21
                        end_date:1553481519000,//3.25
                        duration:'850-1000',
                        parent:'1',
                        type:'task'
                    },
                    {
                        id:'15',
                        name:'施工-招标',
                        start_date:1553135919000,//3.21
                        end_date:1553481519000,//3.25
                        duration:'850-1000',
                        parent:'1',
                        type:'task'
                    },
                    {
                        id:'16',
                        name:'设计',
                        start_date:1553302058000,//3.21
                        end_date:1553481519000,//3.25
                        duration:450,
                        parent:'1',
                        type:'milestone'
                    },
                ],//树形数据
                relation:[
                    {
                        id:'1',
                        source:'1',
                        target:'2',
                        type:0,//FS:0 SS:1 FF:2 SF:3
                        lag:'关系6'
                    },
                    {
                        id:'2',
                        source:'5',
                        target:'2',
                        type:0,//FS:0 SS:1 FF:2 SF:3
                        lag:'关系6'
                    },
                    {
                        id:'3',
                        source:'8',
                        target:'4',
                        type:0,//FS:0 SS:1 FF:2 SF:3
                        lag:'关系6'
                    },
                    {
                        id:'4',
                        source:'7',
                        target:'4',
                        type:0,//FS:0 SS:1 FF:2 SF:3
                        lag:'关系6'
                    },

                ],//关系数据
                begin:new  Date().getTime(),//用于测试
                dayLength:50,
                isMove:false,
                selectedColor:'#3a8ee6'
            }
        },
        mounted:function () {
            let vm=this;
            vm.getData();
        },
        methods: {
            getData:function(){
                let vm=this;
                vm.begin=new  Date().getTime()//用于测试
                // $.ajax({
                //     url:'https://www.easy-mock.com/mock/5c7bd8e95aff8d30f9ea7d18/QD/planList',
                //     type:'get',
                //     dataType:'json',
                //     success:function (data) {
                //         vm.taskTree=data.data;
                //         vm.taskTree.push({
                //             id:'1',
                //             name:'计划',
                //             start:1,
                //             end:1000,
                //             duration:500,
                //             parent: "",
                //         });
                //         qdPertGraph.qdPertGraphConfig(vm.taskTree,vm.relation,'container');
                //         // 拖拽事件
                //         commonData.QDPertData.QDZR.on('mousedown',function (e) {
                //             var disX = e.offsetX;
                //             var disY = e.offsetY;
                //             var zrgX=commonData.QDPertData.QDZRG.position[0];//原来X轴
                //             var zrgY=commonData.QDPertData.QDZRG.position[1];//原来Y轴
                //             commonData.QDPertData.QDZR.on('mousemove',function (ev) {
                //                 var ev = ev || event;
                //                 var parmsX=ev.offsetX-disX;//移动X轴
                //                 var parmsY=ev.offsetY-disY;//移动Y轴
                //                 commonData.QDPertData.QDZRG.attr('position',[zrgX+parmsX,zrgY+parmsY]);
                //
                //             });
                //             commonData.QDPertData.QDZR.on('mouseup',function () {
                //                 commonData.QDPertData.QDZR.off('mousemove');
                //             });
                //         });
                //         qdPertGraph.qdInitGraph();
                //         let end=new Date().getTime();
                //         console.info("耗时"+(end -vm.begin));
                //     }
                // });
                vm.taskTree.push({
                    id:'1',
                    name:'计划',
                    start_date:1553097600000,//3.21:00
                    end_date:1555980458000,//3.25:10
                    parent: "",
                    type:'project'
                });
                qdPert.qdPertGraphConfig({
                        containerId:'container',
                        planList:vm.taskTree,
                        planRelation:vm.relation,
                        dayLength:50,
                        isMove:true,//是否可以移动
                        selectedColor:vm.selectedColor
                    }
                );
                qdPert.qdInitGraph();
                let end=new Date().getTime();
                console.info("耗时"+(end -vm.begin));
            },
            clickTest:function (id) {
                qdPert.qdTaskClick(id);
            },
            clickTestPath:function () {
                qdPert.qdCriticalPatchClick();
            },
            clickUpdate:function () {
                qdPert.qdUpdateGraph();
            }
        }
    }
</script>
<style lang="less">
    .qd-pert-demo{
        display: flex;
        margin-top: 50px;
        .qd-pert-use{
            width: 50%;
        }
    }
    #container{
        /*background-color: #f74c31;*/
    }
</style>